<style>
    button,input,textarea{outline:0}.window .buttons .closes,.window .buttons .maximize,.window .buttons .minimize,.window-button{padding:0;margin:0;margin-right:6px;width:12px;height:12px;background-color:#dcdcdc;border:1px solid transparent;border-radius:6px;color:rgba(0,0,0,.5)}.window{width:100%}.window .handle{height:38px;background:#f9f9f9;border:1px solid #eee;border-top-left-radius:3px;border-top-right-radius:3px;color:rgba(0,0,0,.7);font-family:consolas;font-size:13px;line-height:38px;text-align:center}.window .buttons{position:absolute;float:left;margin:0 8px}.window .buttons .closes{background-color:#fc625d}.window .buttons .minimize{background-color:#fdbc40}.window .buttons .maximize{background-color:#35cd4b}#log-container{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px}
</style>
<div class="card">
    <div class="card-header"></div>
    <div class="card-block">
        <div class="container">
            <div class="window">
                <div class="handle">
                    <div class="buttons">
                        <button class="closes"></button>
                        <button class="minimize"></button>
                        <button class="maximize"></button>
                    </div>
                    <span class="title">[[${userName}]]@[[${osName}]]: ~ (logback)</span>
                </div>
                <div id="log-container">
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //动态指定高度
    $(function () {
        var offsetHig = document.documentElement.clientHeight;
        var height = offsetHig-146;
        $("#log-container").height(height)
    })
    $("#log-container div").append("aurora- "+"<span style='color: #CD0066'>"+getFormatDate()+"</span> <span style='color: #00CD00'>[aurora-system-msg]</span> <span style='color: #0000ff'>INFO</span> <span style='color: #DE00CC'>me.auaora.Applicationn</span> : (*^ω^*) 欢迎使用~").append("<br/>");
    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
    var stompClient = null;
    if(stompClient==null){
        var socket =new SockJS('/websocket?token=kl');
        stompClient = Stomp.over(socket)
        stompClient.connect({token:"kl"}, function(frame) {
            stompClient.subscribe('/topic/pullLogger', function(event) {
                var content=JSON.parse(event.body);

                var color = "<span style='color: #0000ff'>";

                if(content.level == "WARN"){
                    color = "<span style='color: #FFFF00'>"
                }
                if(content.level == "ERROR"){
                    color = "<span style='color: #FF0000'>"
                }
                if(content.level == "DEBUG"){
                    color = "<span style='color: #DEA000'>"
                }

                $("#log-container div").append("aurora- "+"<span style='color: #CD0066'>"+content.timestamp +"</span> <span style='color: #00CD00'>["+ content.threadName+"]</span> "+ color + content.level+"</span> <span style='color: #DE00CC'>"+ content.className+"</span> : "+content.body).append("<br/>");
                if (content.exception != "") {
                    $("#log-container div").append("<p>" + content.exception + "</p>");
                }
                $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());

                },{
                token:"kltoen"
            });
        });
    }
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient=null;
        }
    }
    function getFormatDate() {
        var date = new Date();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentDate = date.getFullYear() + "-" + month + "-" + strDate
            + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        return currentDate;
    }

    /**
     * 这个是用来关闭的
     */
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient = null;
        }
    }
</script>